<template>
<div>
  <h1>实时公告发布</h1>
  <el-divider/>
  <el-row>
    <el-button @click="publish" type="primary">发布</el-button>&nbsp;
    <el-input v-model="showTime"  style="width: 12%" placeholder="请输入展示时长"></el-input>
    <el-tag size="large">分钟</el-tag>
  </el-row>
  <br/>
  <el-row>
    <el-input v-model="content" show-word-limit maxlength="60" placeholder="请输入公告内容" style="width: 80%" size="large"></el-input>
  </el-row>
  <el-row justify="center">
    <h1>实时公告列表</h1>
    <el-divider/>
    <div style="width: 100%;display: flex;justify-content: start">
      <el-button @click="deleteRealAnnounce" v-show="showBtn" type="primary" size="small" >批量删除</el-button>
    </div>
    <el-table stripe :data="realList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="公告内容" prop="announceContent" show-overflow-tooltip></el-table-column>
      <el-table-column label="发布者id" prop="userId"></el-table-column>
      <el-table-column label="发布时间" prop="publishTime"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="deleteRealAnnounceOne(scope.row.announceId)" type="primary" size="small">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </el-row>
  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :pager-count=5
  />
</div>
</template>

<script>
import {deleteReal, getRealA, publishRealA} from "@/api/user";
import {mapGetters} from "vuex";
import {deleteTicketByIds} from "@/api/ticket";

export default {
  name: "index",
  data(){
    return{
      content:'',
      showTime: '',
      total:0,
      currentPage:1,
      pageSize:10,
      realList:[],
      listDelete:[],
      showBtn:false
    }
  },
  mounted() {
    this.getRealAnnounce()
  },
  computed:{
    ...mapGetters(['userId'])
  },
  methods:{
    publish(){
      if (!/^[\d.]+$/.test(this.showTime)){
        this.$message({
          type:'warning',
          message:'输入的时长为空或非数字'
        })
        return
      }
      if (this.content===''){
        this.$message({
          type:'warning',
          message:'公告内容不能为空'
        })
        return
      }
      const message=JSON.stringify({
        type:'realAnnounce',
        showTime:this.showTime,
        content:this.content
      })
      //向所有用户发送实时通知
      this.$websocket.ws.send(JSON.stringify({toName:null,message:message}))
      const real={
        userId:this.userId,
        announceContent:this.content,
      }
      publishRealA(real).then(()=>{
        this.showTime=''
        this.content=''
        this.getRealAnnounce()
      })
    },
    getRealAnnounce(){
      getRealA(this.currentPage,this.pageSize).then(response=>{
        this.total=response.data.total
        this.realList=response.data.realList
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getRealAnnounce()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getRealAnnounce()
    },
    handleSelectionChange(select){
      this.showBtn = select.length > 1;
      this.listDelete=select
    },
    deleteRealAnnounce(){
      const ids=[]
      this.listDelete.forEach(real =>{
        ids.push(real.announceId)
      })
      deleteReal(ids).then(()=>{
        this.getRealAnnounce()
      })
    },
    deleteRealAnnounceOne(id){
      const  ids=[]
      ids.push(id)
      deleteReal(ids).then(()=>{
        this.getRealAnnounce()
      })
    }
  }
}
</script>

<style scoped>

</style>
